<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-评价</title>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li class="active">我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li @click='person_integral'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="right_box fl">
                <div class="evaluate">
                    评价
                </div>

                <div class="product_info clear_both">
                    <div class="info_left fl">
                        <p class="match">商品相符</p>
                        <p class="evaluate_num">{{starGoods}}</p>
                        <div class="star_list auto_star">
                            <el-rate v-model="starGoods" :colors="['#CC1818', '#CC1818', '#CC1818']" ></el-rate>
                        </div>
                        <div class="product_img">
                            <img :src="goods.goodsImgs" alt="">
                        </div>
                        <div class="product_tit">
                            {{goods.goodsName}}
                        </div>
                        <p class="product_money"><span>￥</span> {{goods.goodsUnitPrice}}</p>
                    </div>
                    <div class="evaluate_right fl">
                        <!-- <div class="star_box">
                            <span class="fl star_tit">商品相符</span>
                            <el-rate v-model="value2" :colors="['#CC1818', '#CC1818', '#CC1818']" class="fl"></el-rate>
                        </div> -->
                        <div class="star_box">
                            <span class="fl star_tit">卖家服务</span>
                            <el-rate v-model="starServe" :colors="['#CC1818', '#CC1818', '#CC1818']" class="fl"></el-rate>
                        </div>
                        <div class="star_box">
                            <span class="fl star_tit">物流服务</span>
                            <el-rate v-model="starDispatch" :colors="['#CC1818', '#CC1818', '#CC1818']" class="fl"></el-rate>
                        </div>
                        <div class="star_box">
                            <span class="fl star_tit">评价晒单</span>
                            <textarea name="" id="" v-model='content' cols="30" rows="10" class="fl evaluate_input"></textarea>
                        </div>
                        <div class="star_box">
                            <span class="fl star_tit">上传照片</span>
                            <div class="up_box fl">
                                <el-upload action="http://39.105.19.58:8092/xmsc/upload/singleUploadImg" list-type="picture-card"
                                    :on-preview="handlePictureCardPreview" :on-success='up_success' :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <!-- <span class="fl all_pic">共0张，还能上传8张</span> -->
                            </div>
                        </div>

                        <div class="anonymous">
                            <el-checkbox v-model="checked" @change='isAnonymity'>匿名</el-checkbox>
                            <div class="evaluate_submit fr" @click='submit_evaluate'>
                                提交
                            </div>
                        </div>
                    </div>
                </div>


                <!-- 评价 -->
                <div class="comment_box" v-show="nowIndex===2">
                    <div class="comment_nav">
                        <ul>
                            <li :class="{active:evalute_index==0}" @click='gcl(0)'>全部({{evalute_num}})</li>
                            <li :class="{active:evalute_index==4}" @click='gcl(4)'>有图({{youtu}})</li>
                            <li :class="{active:evalute_index==3}" @click='gcl(3)'>好评({{haoping}})</li>
                            <li :class="{active:evalute_index==2}" @click='gcl(2)'>中评({{zhongping}})</li>
                            <li :class="{active:evalute_index==1}" @click='gcl(1)'>差评({{chaping}})</li>
                        </ul>
                    </div>
                    <div class="comment_containe">
                        <div class="comment_item" v-for='item in gcl_list'>
                            <div class="left_box fl">
                                <div class="comment_person">
                                    <div class="person_pic fl">
                                        <img :src="item.userVia" alt="">
                                    </div>
                                    <div class="person_name fl">{{item.userNickname}}</div>
                                </div>
                            </div>
                            <div class="fl">
                                <div class="star_list">
                                    <el-rate
                                        v-model="item.starShowAvg"
                                        disabled
                                        text-color="#CC1818"
                                    >
                                    </el-rate>

                                </div>
                                <div class="comment_text">{{item.content}}</div>
                                <div class="comment_img_list">
                                    <ul>
                                        <li v-for='item in item.img_list'>
                                            <img :src="item" alt="">
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <el-pagination background layout="prev, pager, next" :total="evalute_total" class="page_list">
                    </el-pagination>
                </div>


            </div>

        </div>

        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>

    </div>

    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    seckill_swiper_btn:true,
                    seckill_list:5,
                    popup:false,
                    // 星星
                    starServe:4,
                    starGoods:4,
                    starDispatch:4,
                    content:'',
                    car_active:false,groups:3,
                    value2:2,
                    imageUrl: '',
                    checked:false,
                    comments:8,
                    goodsId:'',
                    isAnonymity_num:0,
                    oGoodsId:'',
                    dialogImageUrl: '',
                    dialogVisible: false,
                    img_list:'',
                    goods:'',
                    // 评价
                    chaping:0,
                    youtu:0,
                    haoping:0,
                    zhongping:0,
                    evalute_index:0,
                    nowIndex:2,
                    evalute_num:'',
                    gcl_list:'',
                    evalute_total:0
                };
            },
            created() {
                
            },
            mounted() {
                this.goodsId = this.GetQueryString().id
                this.oGoodsId = this.GetQueryString().listid
                this.ogd()
                this.gcl(0)
                this.gclnum()
            },
            methods: {
                // 评论列表
                gcl(status){
                    axios({
                        method:"POST",
                        url:base_url + "/occ/gcl",
                        data:Qs.stringify({
                            pageSize:10,
                            pageNum:1,
                            status:status,
                            goodsId:this.goodsId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.evalute_index = status     
                        app.evalute_total = res.data.data.list.total     
                        app.gcl_list = res.data.data.list.list.map(function (item) {
                            var new_item = item
                            if (item.images!=''&&item.images!=undefined&&item.images!=null) {
                                new_item.img_list = item.images.split(',')
                            }
                            // if (0<=item.starShowAvg<=3) {
                            //     new_item.starShowAvg = 1
                            // }else if (4<=item.starShowAvg<=6) {
                            //     new_item.starShowAvg = 2
                            // }else if (7<=item.starShowAvg<=9) {
                            //     new_item.starShowAvg = 3
                            // }else if (10<=item.starShowAvg<=12) {
                            //     new_item.starShowAvg = 4
                            // }else if (13<=item.starShowAvg<=15) {
                            //     new_item.starShowAvg = 5
                            // }
                            return new_item
                        })
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                 // 获取评价数量
                gclnum(){
                    axios({
                        method:"POST",
                        url:base_url + "/occ/gcsc",
                        data:Qs.stringify({
                            goodsId:this.goodsId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code==-1) {
                            app.$message.error(res.data.msg);
                        }else{
                            var object = res.data.data.data
                            app.chaping = object.cp
                            app.youtu = object.yt
                            app.haoping = object.hp
                            app.zhongping = object.zp
                            app.evalute_num = object.qb
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },

                // 获取商品
                
                ogd(){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/ogd",
                        data:Qs.stringify({
                            orderGoodsId:this.oGoodsId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.goods = res.data.data.goods
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 提交
                submit_evaluate(){
                    axios({
                        method:"POST",
                        url:base_url + "/occ/ic",
                        data:Qs.stringify({
                            starGoods:this.starGoods,
                            starServe:this.starServe,
                            starDispatch:this.starDispatch,
                            isAnonymity:this.isAnonymity_num,
                            content:this.content,
                            images:this.img_list,
                            oGoodsId:this.oGoodsId
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code==1) {
                            window.location.href='person_center.html?index='+0
                        }else{
                            app.$message.error(res.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                handleRemove(file, fileList) {
                    this.img_list = ''
                    for (let i = 0; i < fileList.length; i++) {
                        this.img_list += fileList[i].response.data.imgUrl
                    }
                },
                handlePictureCardPreview(file) {
                    this.dialogImageUrl = file.url;
                    this.dialogVisible = true;
                },
                up_success(file){
                    this.img_list += file.data.imgUrl+','
                    console.log(this.img_list)
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                isAnonymity(){
                    if (this.checked==false) {
                        this.isAnonymity_num = 0
                    }else if (this.checked==true) {
                        this.isAnonymity_num = 1
                    }
                },
                
              


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                handleAvatarSuccess(res, file) {
                    this.imageUrl = URL.createObjectURL(file.raw);
                },
                beforeAvatarUpload(file) {
                    // const isJPG = file.type === 'image/jpeg';
                    // const isLt2M = file.size / 1024 / 1024 < 2;
                    console.log(file)

                    // if (!isJPG) {
                    // this.$message.error('上传头像图片只能是 JPG 格式!');
                    // }
                    // if (!isLt2M) {
                    // this.$message.error('上传头像图片大小不能超过 2MB!');
                    // }
                    // return isJPG && isLt2M;
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_integral(){
                    window.location.href='person_integral_order.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
            }
        })
        
    </script>
</body>

</html>